<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
        <svg class="icon" style="color: #fc3e7e">
            <use xlink:href = "#icon-erji"></use>
        </svg>
        <span style="color: #fc3e7e">米古音乐</span>
    </div>
    <ul class="navbar">
        <li :class="{active: item.name == activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path,item.name)">
            {{item.name}}
        </li>
        <li style="margin-left: 480px;">
            <div class="header-search">
                <input type="text" placeholder="搜索歌曲、歌手" @keyup.enter="goSearch()" v-model="keywords" style="color: #fc3e7e">
                <div class="search-btn" @click="goSearch()" style="background-color: #fc3e7e">
                    <svg class="icon" style="color: white;">
                        <use xlink:href = "#icon-sousuo"></use>
                    </svg>
                </div>
            </div>
        </li>
        <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
            {{item.name}}
        </li>
    </ul>
    <div class="header-right" v-show="loginIn">
        <div id='user'>
            <img :src='attachImageUrl(avator)'>
            <ul class="menu">
                <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">{{item.name}}</li> 
            </ul>
        </div>
        <div class="huiYuan" @click="toRecharge" v-if="userInfo.vip">VIP</div>
    </div>
  </div>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex';
import {navMsg,loginMsg,menuList} from '../assets/data/header';
import {getRecharge,getUserOfId} from '../api/index'
export default {
  name: 'the-header',
  data() {
      return {
          navMsg: [],    //左侧导航栏
          keywords: '',  //搜索关键字       
          loginMsg: [],  //右侧导航栏
          menuList: [], //用户下拉菜单
          userInfo:{}
      }
  },
  computed:{
      ...mapGetters([
          'activeName',
          'loginIn',
          'avator',
          'userId'
      ])
  },
  created() {
      this.navMsg = navMsg;
      this.loginMsg = loginMsg;
      this.menuList = menuList;
      this.toGetUserInfo()
  },
  mounted(){
      document.querySelector('#user').addEventListener('click',function(e){
          document.querySelector('.menu').classList.add("show");
          e.stopPropagation()           //关键在于阻止冒泡
      },false);
      document.querySelector('.menu').addEventListener('click',function(e){
          e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
      },false);
      document.addEventListener('click',function(){
        document.querySelector('.menu').classList.remove('show');
      },false);
  },
  
  methods: {
       //提示信息
        notify(title,type) {
            return this.$message({
                message: title,
                type: type
            })
        },
      goHome() {
            this.$store.commit('setActiveName','首页');
          this.$router.push({path: "/"},err=>{});
      },
      goPage(path,name) {
          if(!this.loginIn && path=='/my-music'){
              this.notify('请先登录','warning');
          }else{
            this.$store.commit('setActiveName',name);
            this.$router.push({path: path},err=>{});
          }          
      },
      goSearch(){
            this.$router.push({path:'/search',query:{keywords: this.keywords}})
            this.$router.go(0)
      },
      //获取图片地址
      attachImageUrl (srcUrl) {
        return srcUrl? this.$store.state.configure.HOST+ '/' + srcUrl : '../assets/img/user.jpg';
      },
      goMenuList(path){
          if(path == 0){
              this.$store.commit('setLoginIn',false);
              this.$store.commit('setIsActive',false);
              this.$router.go(0);
          }else{
              this.$router.push({path:path});
          }
      },
      toRecharge(){
        getRecharge(this.userId).then(res=>{
            if(res.code){
                this.notify("充值会员成功",'success')
            }else{
                this.notify("充值会员失败",'error')
            }
        })
      },
      toGetUserInfo(){
        if(this.userId){
            getUserOfId(this.userId)
            .then(res =>{
                this.userInfo=res;
                this.$store.commit.setUserId(res.id)
                this.$store.commit.setUsername(res.username)
                this.$store.commit.setAvator(res.avator)
                // console.log(res,'用户信息');
            })
            .catch(err => {
                console.log(err);
            })
        }
      }
  }

}
</script>

<style lang="scss" scoped>
@import '../assets/css/the-header.scss';
</style>
